import * as echarts from 'echarts/core';
import { GridComponent, GridComponentOption, TitleComponent } from 'echarts/components';
import { LineChart, LineSeriesOption,BarChart  } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
  GridComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  BarChart,
  TitleComponent
]);

type EChartsOption = echarts.ComposeOption<
  GridComponentOption | LineSeriesOption
>;



export const line = (data, dom) => {
  const chartDom = document.getElementById(dom)!;
  const myChart = echarts.init(chartDom);
  const xData = Object.keys(data["订单状态"])
  const yData = Object.values(data["订单状态"])
  const option = {
    title: {
      text: '订单状态统计',
    },
    xAxis: {
      type: 'category',
      data: xData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: yData,
        type: 'line'
      }
    ]
  }


  return option && myChart.setOption(option);
}


export const bar = (data, dom) => {
  const chartDom = document.getElementById(dom)!;
  const myChart = echarts.init(chartDom);
  const xData = Object.keys(data["物流状态"])
  const yData = Object.values(data["物流状态"])
  const option = {
    title: {
      text: '物流状态统计',
    },
    xAxis: {
      type: 'category',
      data: xData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: yData,
        type: 'bar'
      }
    ]
  }


  return option && myChart.setOption(option);
}
